<template>
  <div>
    <div class="appAutoFitSquare" :class="className">
      <div class="appAutoFitSquareInner">
        <div class="suqareTopInfo">
          <SvgIcon
            icon-name="iconplay"
            class-name="squareCardIcon"
            color="#fff"
          />
          <span>{{ transedPlayCount }}</span>
        </div>
        <div class="squareQuickPlay" @click="$emit('onPlay', song.id, false)">
          <div class="creatorInfo">
            <SvgIcon icon-name="iconjurassic_user" color="#fff" :size="16" />
            <span>{{ song.creator.nickname }}</span>
          </div>
          <div class="fadeDiv">
            <SvgIcon
              icon-name="iconbofang"
              color="#d989b1"
              class-name="squareCardIcon2"
            />
          </div>
        </div>
        <img
          :src="song.coverImgUrl + '?param=260y260'"
          :alt="song.name"
          @click="$emit('onPlay', song.id, false)"
        />
      </div>
    </div>
    <div class="songListCardName">
      {{ song.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

import { PlayListDetail } from "@/types/album";
import SvgIcon from "../common/SvgIcon.vue";

const props = defineProps<{
  song: PlayListDetail;

  className?: string;
  key?: any;
}>();

// const handlePlayTrue = (id: number, playFlag: boolean) => {
//   debugger;
//   typeof props.handlePlay === "function" && props.handlePlay(id, playFlag);
// };

const transedPlayCount = computed(() => {
  let res = "";
  const playCount = props.song.playCount;
  if (playCount < 100000) {
    res = String(playCount);
  } else if (playCount < 100000000 && playCount >= 100000) {
    res = `${Math.ceil(playCount / 10000)}万`;
  } else if (playCount >= 100000000) {
    res = `${Math.ceil(playCount / 100000000)}亿`;
  }
  return res;
});
</script>

<style scoped lang="less">
.suqareTopInfo {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 36px;
  display: flex;
  padding-top: 5px;
  justify-content: flex-end;
  padding-right: 5px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  span {
    color: #fff;
    font-size: 12px;
  }
  .squareCardIcon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
}
.squareQuickPlay {
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  .creatorInfo {
    color: #fff;
    font-size: 12px;
    display: flex;
    height: 36px;
    align-items: flex-end;
  }
  padding-bottom: 10px;
  bottom: 0px;
  right: 0px;

  .fadeDiv {
    cursor: pointer;
    transition: all linear 0.25s;
    opacity: 0;
    height: 34px;
    width: 34px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .squareCardIcon2 {
    width: 16px;
    height: 16px;
  }
}
.songListCardName {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}
.appAutoFitSquare {
  min-width: 100px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.appAutoFitSquare:after {
  content: "";
  display: block;
  height: 0.1px;
  width: 100%;
  padding-top: 100%;
}

.appAutoFitSquare .appAutoFitSquareInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  &:hover {
    .squareQuickPlay .fadeDiv {
      opacity: 1;
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
